<!DOCTYPE html>
<html>
  <head>
    <title>登录</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
	<script type="text/javascript">//JavaScript type属性，与C语言的语法极像 
	//编写脚本的时候编写的就是函数，函数function，JavaScript是弱类型语言，没有返回值类型，所以直接就是返回值名
		/*function checkInput(){
			var txtLoginName = document.getElementById("txtLoginName");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			var txtPassword = document.getElementById("txtPassword");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			
			if(txtLoginName.value.length == 0){
				alert("登录名不能为空");	
				txtLoginName.focus();//获得焦点
				return;
			}
			else if(txtLoginName.value.length < 6){
				alert("登录名至少6个字符");	
				txtLoginName.focus();//获得焦点
				txtLoginName.select();//把该文本内容全都选中
				return;
			}
			
			if(txtPassword.value.length == 0){
				alert("密码不能为空");
				txtPassword.focus();//获得焦点
				return;
			}	
			else if(txtPassword.value.length < 6){
				alert("密码至少6个字符");
				txtPassword.focus();//获得焦点
				txtPassword.value = "";//把值赋值为空，即把该文本内容全都清除
				return;
			}	
		}*/
		function checkInput2(){
			var flag = true;//
			var txtLoginName = document.getElementById("txtLoginName");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			var spanLoginName = document.getElementById("spanLoginName");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			var txtPassword = document.getElementById("txtPassword");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			var spanPassword = document.getElementById("spanPassword");//通过Id在文档中获得元素，id;某一个表单的属性，通常用来表示表单当中唯一的元素
			
			if(txtLoginName.value.length == 0){
				spanLoginName.innerHTML = "登录名不能为空。";
				flag = false;	//只做否定，不做肯定，只找错的
			}
			else if(txtLoginName.value.length < 6){
				spanLoginName.innerHTML = "登录名至少6个字符。";	
				flag = false;	
			}
			else {
				spanLoginName.innerHTML="";	
			}
			
			if(txtPassword.value.length == 0){
				spanPassword.innerText = "密码不能为空。";	
				flag = false;	
			}
			else if(txtPassword.value.length < 6){
				spanPassword.innerText = "密码至少6个字符。";
				flag = false;	
			}
			else {
				spanPassword.innerText="";	
			}
			return flag;//一定要有反回，不然还是和onclick的效果一样
		}
	</script>
  </head>
  
  <body>
  
  	<form method="post" action="./LoginServlet" onsubmit="return checkInput2();"><!-- ./表示文件对应的上级，/MyWeb/LoginServlet -->
	    <table border="1">
		  <tr>
		    <td>登录名:</td>
		    <!-- 表单域/控件，表单中放的东西 -->
		    <td><input type="text" id="txtLoginName" name="txtLoginName"/></td>
		    <!-- id是java用，name是servlet用的 -->
		    <td id="spanLoginName" style="color : red;"></td>
		  </tr>
		  <tr>
		    <td>密码:</td>
		    <td><input type="password" id="txtPassword" name="txtPassword"/></td>
		    <td  id="spanPassword" style="color : red;"></td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td>
		    	<input type="submit" value="登录" /><!-- onclick="checkInput2()"不能再提交按钮上写 -->
		    	<input type="reset" value="取消" />
		    </td>
		    <td>&nbsp;</td>
		  </tr>
		</table>
	</form>
  </body>
</html>